@extends('layouts.app')

@section('content')

    {{--栏目详情--}}
    <el-page-header @back="goBack" :content="ssqDetail.name" style="padding:10px"></el-page-header>

    <template>
        <el-tabs v-model="activeName" style="padding:10px">
            <el-tab-pane label="标题设置" name="first">
                <el-form v-model="form" label-width="80px">
                    <el-form-item label="主标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="副标题">
                        <el-input v-model="form.subtitle"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" size="small" @click="generateTitle">一健生成主标题</el-button>
                        <el-button type="warning" size="small" @click="generateSubtitle">一健生成副标题</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="数据设置" name="second">
                <el-button type="success" @click="addData">新增</el-button>
                <el-tabs v-model="activeNameTwo" style="padding:10px">
                    <el-tab-pane label="左边" name="left">
                        <el-row v-for="(item, index) in form.leftData" :key="index" style="margin-top: 5px;">
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.one }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.two }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.three }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.four }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.five }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.six }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#001dde;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.seven }}</div>

                            <el-link class="fr"
                                     type="danger"
                                     @click="deleteData(item.id)"
                                     style="margin-top:6px;margin-left: 10px;margin-right: 10px;">删除</el-link>
                            <el-link class="fr"
                                     type="primary"
                                     @click="editData(item)"
                                     style="margin-top:6px;margin-left: 10px;margin-right: 10px;">编辑</el-link>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="右边" name="right">
                        <el-row v-for="(item, index) in form.rightData" :key="index" style="margin-top: 5px;">
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.one }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.two }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.three }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.four }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.five }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#e73223;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.six }}</div>
                            <div style="display: inline-block;color:#fff;font-size:10px;float:left;width:24px;height:18px;background:#001dde;border-radius:50%;text-align:center;line-height:18px;margin-right:1px;">@{{ item.seven }}</div>

                            <el-link class="fr"
                                     type="danger"
                                     @click="deleteData(item.id)"
                                     style="margin-top:6px;margin-left: 10px;margin-right: 10px;">删除</el-link>
                            <el-link class="fr"
                                     type="primary"
                                     @click="editData(item)"
                                     style="margin-top:6px;margin-left: 10px;margin-right: 10px;">编辑</el-link>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="其他" name="third">
                <el-button type="success" size="small" @click="generateShare">分享此栏目</el-button>
                <el-button type="warning" size="small" @click="copyCate">复制此栏目</el-button>
                <el-button type="danger" size="small" @click="delData">一健删除全部数据</el-button>
            </el-tab-pane>
        </el-tabs>
    </template>

    <el-dialog
        title="期数"
        :visible.sync="dialog.timeIsShow"
        width="80%"
        center>
        <el-row>
            <el-input type="text" v-model="form.number"></el-input>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialog.timeIsShow = false">取 消</el-button>
            <el-button type="primary" @click="timeSubmit">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
        title="时间"
        :visible.sync="dialog.dateIsShow"
        width="80%"
        center>
        <el-row style="text-align: center">
            <el-date-picker
                v-model="form.date"
                type="date"
                value-format="yyyy年MM月dd日"
                style="float:left;width: 55%;"
                placeholder="选择日期">
            </el-date-picker>
            <el-time-picker
                v-model="form.time"
                value-format="HH:mm"
                format="HH:mm"
                style="float:right;width: 40%;"
                placeholder="选择时间">
            </el-time-picker>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialog.dateIsShow = false">取 消</el-button>
            <el-button type="primary" @click="dateSubmit">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
        title="数据"
        :visible.sync="dialog.dataIsShow"
        width="80%"
        center>
        <el-row style="margin-bottom:10px;">
            <el-input type="number" v-model="form.data.one" placeholder="请输入" style="width: 30%;"></el-input>
            <el-input type="number" v-model="form.data.two" placeholder="请输入" style="width: 30%;"></el-input>
            <el-input type="number" v-model="form.data.three" placeholder="请输入" style="width: 30%;"></el-input>
        </el-row>
        <el-row style="margin-bottom:10px;">
            <el-input type="number" v-model="form.data.four" placeholder="请输入" style="width: 30%;"></el-input>
            <el-input type="number" v-model="form.data.five" placeholder="请输入" style="width: 30%;"></el-input>
            <el-input type="number" v-model="form.data.six" placeholder="请输入" style="width: 30%;"></el-input>
        </el-row>
        <el-row style="margin-bottom:10px;">
            <el-input type="number" v-model="form.data.seven" placeholder="请输入" style="width: 90%;"></el-input>
        </el-row>
        <el-row style="margin-bottom:10px;">
            <el-radio v-model="form.data.type" label="left">左边</el-radio>
            <el-radio v-model="form.data.type" label="right">右边</el-radio>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialog.dataIsShow = false">取 消</el-button>
            <el-button type="primary" @click="dataSubmit">确 定</el-button>
        </span>
    </el-dialog>
@endsection

@section('js')
    <script src="/js/ssq/detail.js?v=20210722"></script>
@endsection
